@import '../../styles/global.less';
.k-tabs {
  overflow: hidden;
  .k-tabs-bar {
    border-bottom: 1px solid @border-color;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    .k-tabs-tab-btn-next, .k-tabs-tab-btn-prev {
      cursor: pointer;
      text-align: center;
      font-size: 20px;
      padding: 6px 5px 0;
      color: @icon-color;
    }
    .k-tabs-tab-btn-next-disabed, .k-tabs-tab-btn-prev-disabed {
      color: @disable-color;
      cursor: not-allowed;
    }
   
    .k-tabs-extra {
     
    }
    .k-tabs-nav-container {
      flex: 1;
      width: 0; // 麻痹，我感觉这是个bug
      display: flex;
      position: relative;
      overflow: hidden;
      font-size: 14px;
      margin-bottom: -1px;
      .k-tabs-nav-wrap {
        overflow: hidden;
        flex: 1;
        width: 0;
      }
      .k-tabs-nav {
        display: inline-block;
        transition: transform .3s;
        white-space: nowrap;
      }
    }
    .k-tabs-nav-container-scroll {
      padding: 0;
      .k-tabs-nav-scroll {
        transition: transform .3s;
      }
    }
    .k-tabs-tab {
      display: inline-block;
      height: 100%;
      margin: 0 32px 0 0;
      padding: 10px 0 10px;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
      transition: color .3s;
      border-top-left-radius: @radius;
      border-top-right-radius: @radius;
      color: @color;
      .k-icon {
        margin-right: 8px;
      }
      .k-tabs-close {
        margin: 0 -5px 0 0;
        width: 16px;
        text-align: center;
        color: @icon-color;
        &:hover {
          color: @danger;
        }
      }
      &:last-child {
        margin: 0 2px 0 0;
      }
      &:hover {
        color: @main;
      }
    }
    .k-tabs-tab-active {
      color: @main;
      font-weight: bold;
    }
    .k-tabs-tab-disabled {
      color: @disable-color;
      cursor: not-allowed;
      &:hover {
        color: @disable-color;
      }
    }
    .k-tabs-ink-bar {
      position: absolute;
      height: 2px;
      background: @main;
      bottom: 0;
      transition: transform .3s ease-in-out,
    }
  }
  .k-tabs-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    transition: margin-left .3s cubic-bezier(.645, .045, .355, 1);
    will-change: margin-left;
    .k-tabs-tabpane {
      flex-shrink: 0;
      width: 100%;
      opacity: 1;
    }
  }
}

.k-tabs-centered {
  .k-tabs-bar .k-tabs-nav-container .k-tabs-nav {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.k-tabs-animated {
  .k-tabs-bar .k-tabs-tab-active::after {
    display: none;
  }
  .k-tabs-content {
    .k-tabs-tabpane {
      float: left;
      transition: opacity .45s;
    }
  }
}

.k-tabs-card {
  .k-tabs-bar {
    .k-tabs-extra {
    }
    .k-tabs-tab {
      margin-right: 2px;
      border: 1px solid @border-color;
      background: @back-color;
      padding: 8px 16px;
    }
    .k-tabs-tab-active {
      background: #fff;
      border-bottom-color: transparent;
      &::after {
        display: none;
      }
    }
  }
  .k-tabs-content {
    display: block;
    .k-tabs-tabpane:not(.k-tabs-tabpane-active) {
      height: 0;
      padding: 0;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }
  }
}

.k-tabs-sample {
  // background: #fff;
  .k-tabs-bar {
    margin: 0;
    border: none;
    .k-tabs-tab {
      margin: 0;
      padding: 10px 16px;
    }
    .k-tabs-tab-active {
      background: #fff;
      &::after {
        display: none;
      }
    }
  }
  .k-tabs-content {
    display: block;
    .k-tabs-tabpane {
      padding: 16px;
      background: #fff;
      box-sizing: border-box;
    }
    .k-tabs-tabpane:not(.k-tabs-tabpane-active) {
      height: 0;
      padding: 0;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: none;
    }
  }
}